<template>
  <div>
    <a-form :form="form" @submit="confirmSubmit">
      <a-form-item label="名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-input v-decorator="['note', { rules: [{ required: true, message: '请输入名称' }] }]" @change="titleTextChange" />
      </a-form-item>
      <a-form-item label="类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-select v-decorator="['type', { rules: [{ required: false, message: '请选择类型' }] }]" style="width: 200px" disabled>
          <a-select-opt-group label="基本类型">
            <a-select-option v-for="(item, index) in creategoryEnum" :key="index" :value="item.subjectType">{{
              item.name
            }}</a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="高级类型">
            <a-select-option v-for="(item, index) in systemEnum" :key="index" :value="item.subjectType">{{ item.name }}</a-select-option>
          </a-select-opt-group>
        </a-select>
      </a-form-item>
      <template v-for="(k, index) in form.getFieldValue('keys')">
        <a-form-item
          v-if="multiple"
          :key="k"
          v-bind="index === 0 ? formItemLayout : formItemLayout"
          :label="index === 0 ? '选项' : ' '"
          :required="false"
          :colon="false"
        >
          <a-input
            v-decorator="[
              `names[${k}]`,
              {
                validateTrigger: ['change', 'blur'],
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: '此选项不可为空'
                  }
                ]
              }
            ]"
            placeholder="请输入"
            style="width: 60%; margin-right: 8px"
          />
          <a-icon
            v-if="form.getFieldValue('keys').length > 1"
            type="close"
            :disabled="form.getFieldValue('keys').length === 1"
            @click="() => remove(k)"
          />
        </a-form-item>
      </template>
      <a-form-item v-if="multiple" v-bind="formItemLayoutWithOutLabel">
        <a-button type="dashed" style="width: 60%" @click="add"> <a-icon type="plus" />添加选项 </a-button>
      </a-form-item>
      <a-form-item label="描述" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-input
          v-decorator="['des', { rules: [{ required: true, message: '请输入名称' }] }]"
          placeholder="可选项, 最多40字"
          @change="desTextChange"
        />
      </a-form-item>
      <a-form-item label="分类" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-select
          v-decorator="['category', { rules: [{ required: true, message: '请输入分类' }] }]"
          size="default"
          placeholder="选择分类"
          @change="handleChange"
          @popupScroll="popupScroll"
        >
          <a-select-option v-for="(item, index) in customerList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item>
        <span class="bottomTitle"> 所添加字段将在企业内共享，所有企业项目均可添加使用。</span>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
let id = 0;

export default {
  props: {
    itemModel: {
      type: Object,
      default: () => null
    },
    customerList: {
      type: Array,
      default: () => []
    },
    creategoryEnum: {
      type: Array,
      default: () => []
    },
    systemEnum: {
      type: Array,
      default: () => []
    },
    defaultType: {
      type: String,
      default: ""
    }
  },

  data() {
    return {
      multiple: false,
      nameValue: "",
      resultValues: {},
      optionList: [],
      // form: this.$form.createForm(this, { name: "edit" }),
      formItemLayout: {
        labelCol: {
          span: 5
        },
        wrapperCol: {
          span: 17
        }
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 20, offset: 4 }
        }
      }
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "dynamic_form_item" });
    this.form.getFieldDecorator("keys", { initialValue: [], preserve: true });
  },
  mounted() {
    this.form.setFieldsValue({
      note: this.itemModel.name,
      des: this.itemModel.description,
      type: this.itemModel.type,
      category: this.itemModel.categoryId
    });

    if (this.itemModel.fieldOptions !== null) {
      var optionList = this.itemModel.fieldOptions.split(",");
      if (optionList.length !== 0) {
        this.multiple = true;
        for (let index = 0; index < optionList.length; index++) {
          const element = optionList[index];
          this.optionList.push(element);
          this.add();
        }
      }
      this.$nextTick(() => {
        for (let index = 0; index < optionList.length; index++) {
          const element = optionList[index];

          this.form.setFieldsValue({
            [`names[${index}]`]: element
          });
        }
      });
    }
  },

  methods: {
    handleChange(value) {},
    popupScroll() {},
    confirmSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.resultValues = values;
        }
      });
    },
    titleTextChange(e) {
      const { value } = e.target;
      this.itemModel.name = value;
    },
    desTextChange(e) {
      const { value } = e.target;
      this.itemModel.description = value;
    },
    add() {
      const { form } = this;
      // can use data-binding to get
      const keys = form.getFieldValue("keys");

      const nextKeys = keys.concat(id++);

      // can use data-binding to set
      // important! notify form to detect changes
      form.setFieldsValue({
        keys: nextKeys
      });
    },
    remove(k) {
      const { form } = this;
      // can use data-binding to get
      const keys = form.getFieldValue("keys");
      // We need at least one passenger
      if (keys.length === 1) {
        return;
      }
      // can use data-binding to set
      form.setFieldsValue({
        keys: keys.filter(key => key !== k)
      });
    }
  }
};
</script>

<style scoped>
.bottomTitle {
  color: #8c8c8c;
  font-size: 12px;
  line-height: 18px;
}</style
>>
